<template>
  <div class="app-container">
    <div class="course-list">
      <div class="filter-container">
        <div class="filter-item">
          <el-input placeholder="请输入内容"
                    v-model="searchInput"
                    @keyup.enter.native="getCourse"
                    class="input-with-select">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="getCourse"></el-button>
          </el-input>
        </div>
        <div class="filter-item">
          <el-select v-model="cornerMarkerValue"
                     @change="getCourse()"
                     placeholder="请选择">
            <el-option v-for="item in cornerMarkerOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-select v-model="searchOptionValue"
                     @change="getCourse()"
                     placeholder="请选择">
            <el-option v-for="item in searchOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="filter-item filter-right">
          <el-button type="primary"
                     @click="addCourse"> 添加课程 </el-button>
        </div>
      </div>

      <el-table :data="tableData"
                style="width: 100%"
                @filter-change="handleFilterChange"
                v-loading="loading"
                :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
        <el-table-column prop="courseSeq"
                         label="课程ID">
        </el-table-column>
        <el-table-column prop="courseName"
                         label="课程名称">
        </el-table-column>
        <el-table-column label="全部服务器"
                         prop="serverPlaceTxt"
                         column-key="serverPlaceTxt"
                         :filters="serverOptions"
                         :filter-method="filterServerHandler"
                         :filter-multiple="false">
        </el-table-column>
        <el-table-column label="全部类别"
                         prop="categoryId"
                         column-key="categoryId"
                         :filters="categoryOptions"
                         :filter-method="filterCateoryTypeHandler"
                         :filter-multiple="false">
          <template slot-scope="scope">
            {{ scope.row.categoryTxt }}
          </template>
        </el-table-column>
        <el-table-column label="全部状态"
                         prop="statusTxt"
                         column-key="statusTxt"
                         :filters="statusOptions"
                         :filter-method="filterStatusHandler"
                         :filter-multiple="false">
        </el-table-column>
        <el-table-column prop="passPeople"
                         label="完成人数"
                         width="80">
          <template slot-scope="scope">
            {{scope.row.passPeople}}个
          </template>
        </el-table-column>
        <el-table-column prop="videosLength"
                         label="视频数"
                         width="80">
          <template slot-scope="scope">
            {{scope.row.videosLength}}部
          </template>
        </el-table-column>
        <el-table-column prop="videosTime"
                         label="总时长"
                         width="100">
          <template slot-scope="scope">
            {{returnTime(scope.row.videosTime)}}
          </template>

        </el-table-column>
        <el-table-column prop="createTime"
                         label="上传日期">
        </el-table-column>
        <el-table-column prop="updateTime"
                         label="更改日期">
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="editCourse(scope.row)">编辑
            </el-button>
            <el-button type="text"
                       @click="
                editVideo(scope.row)
              ">视频管理
            </el-button>
            <el-button type="text"
                       v-if="scope.row.status === 9"
                       @click="handleStatusChange(scope.row)"
                       class="btn-green">恢复</el-button>
            <el-button type="text"
                       @click="handleStatusChange(scope.row)"
                       class="btn-red"
                       v-else>停用</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination v-if="pageshow"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="pageSizes"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getManagerCourse,
  getCourseCategory,
  getCourseStatusSwitch,
  getCourseAdd,
  getCourseEdit,
} from '@/api/table'
import SelectHeader from '@/components/SelectHeader'
import { formatterTime } from '@/utils/common'

export default {
  name: '',
  data() {
    return {
      loading: true,
      pageshow: false,
      total: 0,
      pageSize: 20,
      currentPage: 1,
      pageSizes: [10, 20, 30, 40],
      mainParam: {
        courseSeq: '',
        courseName: '',
        serverPlace: '',
        categoryId: '',
        status: '',
        orderBy: '',
        order: '',
      },
      tableData: [],
      serverOptions: [
        {
          value: '1',
          text: '国内',
        },
        {
          value: '2',
          text: '国外',
        },
      ],
      categoryOptions: [],
      statusOptions: [
        {
          value: '0',
          text: '上架中',
        },
        {
          value: '9',
          text: '已停用',
        },
      ],
      searchOptionValue: 'updateTime:desc',
      searchOption: [
        {
          value: 'updateTime:desc',
          label: '按最后更改时间降序',
        },
        {
          value: 'updateTime:asc',
          label: '按最后更改时间正序',
        },
        {
          value: 'passPeople:desc',
          label: '按完成人数降序',
        },
        {
          value: 'passPeople:asc',
          label: '按完成人数正序',
        },
        {
          value: 'totalDuration:desc',
          label: '按视频总时长降序',
        },
        {
          value: 'totalDuration:asc',
          label: '按视频总时长正序',
        },
      ],
      cornerMarkerValue: '',
      cornerMarkerOption: [
        {
          label: '全部角标',
          value: '',
        },
        {
          label: '最新',
          value: '1',
        },
        {
          label: '最热',
          value: '2',
        },
      ],
      searchInput: '',
    }
  },
  mounted() {
    this.getCourse()
  },
  methods: {
    async getCourse() {
      this.loading = true
      this.handleSearchOption()
      const category = await getCourseCategory()
      const res = await getManagerCourse({
        search: this.searchInput,
        serverPlace: this.mainParam.serverPlace,
        categoryId: this.mainParam.categoryId,
        status: this.mainParam.status,
        orderBy: this.mainParam.orderBy,
        order: this.mainParam.order,
        cornerMarker: this.cornerMarkerValue,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      })
      this.loading = false
      const cateoryType = category.result
      this.total = res.result.total
      this.tableData = []
      this.categoryOptions = []
      if (this.total <= this.pageSize) {
        this.pageshow = false
      } else {
        this.pageshow = true
      }

      cateoryType.forEach((cateory, index) => {
        const data = {}
        data.value = cateory.categoryId
        data.text = cateory.zhName
        this.categoryOptions.push(data)
      })
      res.result.list.forEach((item) => {
        const data = {}
        data.id = item.id
        data.passPeople = item.passPeople
        data.courseSeq = item.courseSeq
        data.courseName = item.courseName
        cateoryType.forEach((cateory, index) => {
          if (item.categoryId === cateory.categoryId) {
            data.categoryTxt = cateory.zhName
          }
        })
        data.categoryId = item.categoryId
        item.serverPlace === 1
          ? (data.serverPlaceTxt = '国内')
          : (data.serverPlaceTxt = '国外')
        item.status === 0
          ? (data.statusTxt = '上架中')
          : (data.statusTxt = '已停用')
        data.status = item.status
        data.serverPlace = item.serverPlace
        data.videosLength = item.videos.length
        data.videosTime = 0
        item.videos.forEach((videoItem) => {
          data.videosTime = data.videosTime + Number(videoItem.duration)
        })

        data.createTime = formatterTime(item.createTime)
        data.updateTime = formatterTime(item.updateTime)
        data.completeNum = '?'
        this.tableData.push(data)
      })
    },
    handlOption() {
      this.getCourse()
    },
    handleSizeChange(e) {
      this.pageSize = e
      this.getCourse()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.getCourse()
    },
    addCourse() {
      this.$router.push({ path: 'courseadd', query: { type: '1' } })
    },
    editCourse(data) {
      this.$router.push({
        path: 'courseadd',
        query: {
          type: '2',
          seq: data.courseSeq,
          serverPlace: data.serverPlace,
        },
      })
    },
    editVideo(data) {
      this.$router.push({
        path: 'courseVideo',
        query: {
          seq: data.courseSeq,
          serverPlace: data.serverPlace,
          courseId: data.id,
        },
      })
    },
    handleStatusChange(data) {
      this.courseStatusSwitch(data)
    },
    async courseStatusSwitch(data) {
      const res = await getCourseStatusSwitch({
        serverPlace: data.serverPlace,
        courseId: data.id,
      })
      this.$message({
        message: '修改成功',
        type: 'success',
      })
      this.getCourse()
    },
    filterServerHandler(value, row, column) {
      return row.serverPlace === Number(value)
    },
    filterCateoryTypeHandler(value, row, column) {
      return row.categoryId === value
    },
    filterStatusHandler(value, row, column) {
      return row.status === Number(value)
    },
    handleFilterChange(filters) {
      if (filters.categoryId) {
        this.mainParam.categoryId = filters.categoryId[0]
      }
      if (filters.serverPlaceTxt) {
        this.mainParam.serverPlace = filters.serverPlaceTxt[0]
      }
      if (filters.statusTxt) {
        this.mainParam.status = filters.statusTxt[0]
      }
      this.getCourse()
    },
    secondsToHour(time) {
      const initTime = parseInt(time)
      const toHour = (initTime / 3600).toFixed(3)
      let result = 0
      if (toHour > 0) {
        result = toHour
      }
      return result
    },
    handleSearchOption() {
      this.mainParam.orderBy = ''
      this.mainParam.order = ''
      const searchSelect = this.searchOptionValue.split(':')
      const orderName = searchSelect[0]
      const orderType = searchSelect[1]
      this.mainParam.orderBy = orderName
      this.mainParam.order = orderType
    },
    returnTime(time) {
      var theTime = parseInt(time) // 需要转换的时间秒
      var theTime1 = 0 // 分
      var theTime2 = 0 // 小时
      var theTime3 = 0 // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60)
          theTime1 = parseInt(theTime1 % 60)
          if (theTime2 > 24) {
            // 大于24小时
            theTime3 = parseInt(theTime2 / 24)
            theTime2 = parseInt(theTime2 % 24)
          }
        }
      }
      var result = ''
      if (theTime > 0) {
        result = '' + parseInt(theTime) + '秒'
      }
      if (theTime1 > 0) {
        result = '' + parseInt(theTime1) + '分' + result
      }
      if (theTime2 > 0) {
        result = '' + parseInt(theTime2) + '小时' + result
      }
      if (theTime3 > 0) {
        result = '' + parseInt(theTime3) + '天' + result
      }
      if (result === '') {
        result = 0 + '秒'
      }
      return result
    },
  },
}
</script>
<style lang="scss">
.el-select .el-input {
  width: 180px;
}
</style>
